<template>
  <div class="search">
      <div class="search_head">
          <div class="back" @click="back">
                <van-icon size='20' name="arrow-left"/>
                <p>BACK</p>
          </div>
          <div class="name">
            搜索与筛选
          </div>
      </div>
      <div class="search_nav">
          <van-tabs  v-model="active" animated @click="onClick">
            <van-tab v-for="(item,index) in orderList" :key="index" :title="item.title" >
                <div class="search_wrap">
                    <div class="search_one" v-for="(item,index) in $store.state.searchList" :key="index" @click="info(item.goods_id)">
                    <img :src="item.image" alt="">
                    <p class="name">{{item.goods_name}}</p>
                    <p>已售出:{{item.pay_num}}</p>
                    <p>￥{{item.price}}</p>
                    </div>
                </div>
            </van-tab>
        </van-tabs>
          
      </div>
      
  </div>
</template>

<script>
import {Search} from '../../../api/common'
export default {
    name:'search',
    data() {
        return {
            active:0,
            orderList:[
                {title:'销量降序',type:1},
                {title:'销量升序',type:2},
                {title:'价格降序',type:3},
                {title:'价格升序',type:4},
            ]
        }
    },
    methods: {
        onClick(index,title){
            Search({keywords:this.$store.state.searchname,order:index+1}).then(res=>{
                // console.log(res.result.data)
                this.$store.dispatch("addSearchList",res.result.data)
            })
        },
        back(){
            this.$store.dispatch('changeSearch',true)
        },
        info(gid){
            this.$store.dispatch('changeSearch',true)
          this.$router.push({
            path:`/info/${gid}`
          })
        },
    },
    beforeDestroy() {
        this.$store.dispatch('changeSearch',true)
        this.$store.dispatch("addSearchList",[])
    },
}
</script>

<style lang="less" scoped>
.search{
    margin-top: 100px;
    width: 100%;
    .search_head{
        background-color: #eee;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        .name{
            flex:1;
            font-size: 26px;
        }
        .back{
            display: flex;
            justify-content: flex-start;
            .van-icon-arrow-left::before {
                margin-top: 8px;
            }
        }
    }
    .search_nav{
        width: 100%;
        // height: 100px;
        // display: flex;
        // justify-content: space-around;
        // padding-top: 10px;
        box-sizing: border-box;
        // background-color: white;
        // border-bottom: 1px solid #f20;
        
    .search_wrap{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .search_one{
            width: 45%;
            height: 450px;
            background-color: white;
            margin-top: 20px;
            img{
                width: 100%;
                height: 250px;
            }
            .name{
                height: 120px;
            }
        }
    }
    }
}
</style>